<template>
    <view class="wrap">
        <!-- 没有作品 -->
        <view class="no-works-wrap" v-if="worksStatus === 0">
            <image class="no-works" src="../static/works/noWorks.png" mode=""></image>
            <image class="share-tip" src="../static/works/shareTip.png" mode=""></image>
            <view class="make-btn" @click="makeWorks">开始制作</view>
        </view>
        <!-- 有作品 -->
        <view class="works-wrap" v-if="worksStatus === 1">
            <view class="banner-wrap" @click="makeWorks">
                <image class="banner-image" src="../static/works/banner-default.jpg" mode="aspectFill"></image>
                <view class="banner-tips">创作属于你的时光集</view>
            </view>
            <!-- 照片列表 -->
            <view class="list-wrap">
                <scroll-view scroll-y="true" class="scroll-wrap">
                    <WorksItem v-for="(item, index) in worksList" :key="index" :worksData="item" @clickIcon="clickIcon" @viewWorks="viewWorks(item)"></WorksItem>
                </scroll-view>
            </view>
        </view>
        <!-- 显示编辑操作面板 -->
        <u-action-sheet :list="editlist" v-model="showEditActionSheet" @click="handle" :cancel-btn="cancelBtn"></u-action-sheet>
        <!-- 删除提示模态框 -->
        <u-modal v-model="showDelectModal" title="删除" :content="delTip" @confirm="confirm" show-cancel-button="true" ref="uModal" :async-close="true"></u-modal>
        <!-- 分享到好友和朋友圈 -->
        <view class="share-menu-wrap" v-if="showShareMenu"><ShareMenu @cancel="cancel" @shareType="onshareType"></ShareMenu></view>
    </view>
</template>
<script>
import WorksItem from './components/WorksItem.vue';
import ShareMenu from '../components/ShareMenu.vue';
import { getWorksList, delectWorks, getWorksDetail } from '@/api/works.js';
import { getTemplateDetail } from '@/api/template.js';

import { setAllVuexData } from '@/mixins/setAllVuexData.js';
//
export default {
    name: '',
    data() {
        return {
            // 作品数据状态 0--->没有作品 1--->代表有
            worksStatus: -1,
            // 作品列表
            worksList: [],
            // 编辑操作面板数据
            editlist: [
                {
                    text: '修改'
                },
                {
                    text: '删除'
                }
            ],
            cancelBtn: true,
            // 删除提示
            delTip: '确定删除"xxxx作品名字"吗？',
            showDelectModal: false,
            // 是否显示编辑操作面板
            showEditActionSheet: false,
            // 是否显示分享面板
            showShareMenu: false,
            //
            currentWorksId: '',
            //
            currentWorksName: '',
            //
            currentWorksDetail: ''
        };
    },
    mixins: [setAllVuexData],
    onShow() {
        uni.hideShareMenu();
        this.getWorksList();
    },
    methods: {
        // 获取作品列表
        async getWorksList() {
            let list = await getWorksList();
            if (list && list.length > 0) {
                this.worksList = list;
                this.$uniPromise.setTitle(this.vuex_nickName + '的作品集');
                this.worksStatus = 1;
            } else {
                this.worksStatus = 0;
                this.$uniPromise.setTitle(this.vuex_nickName + '的作品');
            }
        },
        // 点击图标  编辑 分享
        async clickIcon(data) {
            let templateDetail=[];
            let type = data.type;
            this.currentWorksId = data.worksData.id;
            this.currentWorksName = data.worksData.name;
            // 当前作品的详细数据
            this.currentWorksDetail = await getWorksDetail(this.currentWorksId);
            
            if(this.currentWorksDetail&&this.currentWorksDetail.tempid){
                // 当前模板的详细数据
               templateDetail = await getTemplateDetail(this.currentWorksDetail.tempid);
            }
            if(templateDetail&&templateDetail.length>0){
                this.setAllVuexData(this.currentWorksDetail, templateDetail,this.currentWorksId);
                if (type === 'edit') {
                    this.showEditActionSheet = true;
                }
                if (type === 'share') {
                    this.showShareMenu = true;
                    uni.showShareMenu();
                }
            }else{
                this.$showToast('未获取到模板数据')
            }
        },
        // 取消
        cancel() {
            this.showShareMenu = false;
            uni.hideShareMenu();
        },
        // 修改或者删除
        handle(index) {
            // 修改作品
            if (index === 0) {
                this.$u.route('/pages/compoundPages/makeWorks/makeWorks');
            }
            if (index === 1) {
                this.delTip = `确定删除"${this.currentWorksName}"吗？`;
                this.showDelectModal = true;
            }
        },
        // 确认删除
        confirm() {
            this.delectWorks(this.currentWorksId);
        },
        //删除作品
        async delectWorks(worksId) {
            let result = await delectWorks(worksId);
            if (result && result.RequestStatus === 100) {
                this.showDelectModal = false;
                this.currentWorksId = this.currentWorksName = this.currentWorksDetail = '';
                this.$u.vuex('vuex_worksId', '');
                this.getWorksList(); 
            }
        },
        // 查看作品
        async viewWorks(data) {
            let templateDetail=[];
            this.currentWorksId = data.id;
            this.currentWorksName = data.name;
            // 当前作品的详细数据
            this.currentWorksDetail = await getWorksDetail(this.currentWorksId);
            
            if(this.currentWorksDetail&&this.currentWorksDetail.tempid){
                // 当前模板的详细数据
               templateDetail = await getTemplateDetail(this.currentWorksDetail.tempid);
            }
            if(templateDetail&&templateDetail.length>0){
                this.setAllVuexData(this.currentWorksDetail, templateDetail,this.currentWorksId);
                this.$u.route('/pages/compoundPages/viewWorks/viewWorks');
            }else{
                this.$showToast('未获取到模板数据')
            }
        },
        // 制作作品
        makeWorks() {
            this.$u.route('/pages/compoundPages/selectTemplate/selectTemplate');
        }
    },
    watch: {},
    components: { WorksItem, ShareMenu },
    onShareAppMessage(res) {
        let shareData =JSON.stringify({
            worksId: this.vuex_worksId,
            name: this.vuex_templateData.name,
        });
        let sharedInfo = JSON.stringify({
            avatar: this.vuex_avatarUrl,
            nickName: this.vuex_nickName,
            userSignature: this.vuex_userSignature
        });
        return {
            title: `${this.vuex_nickName}分享了相册"${this.vuex_templateData.name}"`,
            path: `/pages/empty/empty?shareData=${shareData}&sharedInfo=${sharedInfo}`,
            imageUrl: `${this.vuex_templateData.theme}`
        };
    }
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    .no-works-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

        .no-works {
            width: 678rpx;
            height: 750rpx;
            margin-top: 50rpx;
        }
        .share-tip {
            width: 363rpx;
            height: 35rpx;
            margin-top: 75rpx;
        }
        .make-btn {
            width: 600rpx;
            height: 86rpx;
            background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#0ac26b, #0ac26b);
            border-radius: 10rpx;
            font-size: 30rpx;
            line-height: 30rpx;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 110rpx;
        }
    }
    .works-wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        .banner-wrap {
            position: relative;
            left: 0;
            top: 0;
            width: 750rpx;
            height: 200rpx;
            .banner-image {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 200rpx;
            }
            .banner-tips {
                position: relative;
                left: 0;
                top: 0;
                width: 100%;
                height: 200rpx;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 2;
                font-size: 36rpx;
                line-height: 36rpx;
                font-weight: bold;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .list-wrap {
            flex-grow: 9;
            width: 100%;
            overflow: scroll;
            padding-top: 50rpx;
            .scroll-wrap {
                height: 100%;
            }
        }
    }
}
</style>
